<link rel="stylesheet" href="static/css/style.css">
{% extends 'base.html' %}
{% block content %}
<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6"><h1>套牌车稽查系统Demo</h1></div>
</div>
<div class="row">
    <div class="col-md-4 card badge-secondary">
        <a href="/prepare" class="btn-dark">
            <h2>[1]服务准备</h2>
        </a>

    </div>
    <div class="col-md-4 card badge-success">
        <h2>[2]上传&预测</h2>
    </div>
    <div class="col-md-4 card badge-primary">
        <h2>[3]结果展示</h2>
    </div>

</div>
<div class="row">
    <!-- 预览选择的图片 -->
{#    <div class="col-4">#}
{#    <div class="col-md-4">#}
{#        <img#}
{#        class="img-fluid"#}
{#        id="preview"#}
{#        src="#"#}
{#        alt="图片预览"#}
{#        style="display: none; width: 300px; height: 200px;">#}
{#    </div>#}

{#<div class="col-4">#}
<div class="col-md-4">
    <img
    class="img-fluid"
    src="{{ url_for('static', filename= './images/index01.jpg',_t=val1) }}">
</div>

{#<div class="col-4">#}
<div class="col-md-4">
    <form id="uploadForm" enctype="multipart/form-data" method="post">
      <div class="form-group">
        <small>      </small>
        <input type=file name=file class="form-control" id="fileInput" aria-describedby="emailHelp" >
        <small id="emailHelp" class="form-text text-muted">上传一张车辆卡口图片</small>
      </div>

      <button type="submit" class="btn btn-primary">开始分析</button>
    </form>

</div>

{#<div class="col-4">#}
<div class="col-md-4">
{#<img#}
{#class="img-fluid"#}
{#src="{{ url_for('static', filename= './images/test.jpg',_t=val1) }}"  >#}


{#    <ol class="list-group">#}
{#        {% for value in context %}#}
{#            <li class="list-group-item">#}
{#                {{value}}#}
{#            </li>#}
{#        {% endfor %}#}
{##}
{#    </ol>#}
{#    <div id="previewContainer" style="display: flex; align-items: center;">#}
    <div id="previewContainer" style="display: flex; flex-direction: column; align-items: center;">
{#        <div>图片预览</div>#}
        <img
{#        style="object-fit: cover; display: block; max-width: 100%; height: auto;"#}
{#        style="object-fit: cover; display: inline-block; max-width: 100px; height: auto; margin-left: 10px;"#}
{#        style="object-fit: cover; display: none; max-width: 100px; height: auto; margin-left: 10px;"#}
{#        style="object-fit: cover; display: block; max-width: 400px; height: auto; margin-top: 10px;"#}
        style="object-fit: cover; display: none; width: 100%; height: auto; margin-top: 10px;"
        class="img-fluid"
        id="preview"
{#        src="#"#}
        src="{% if image_url %}{{ url_for('static', filename=image_url.split('static/')[1]) }}{% else %}#{% endif %}"
{#        alt="图片预览"#}
{#        style="display: none; max-width: 100%; margin-bottom: 10px;">#}
        style="max-width: 100%; margin-bottom: 10px;">
    </div>

    <div id="results">
        <ol class="list-group">
            {% for value in context %}
                <li class="list-group-item">
                    {{value}}
                </li>
            {% endfor %}
        </ol>
    </div>
    </div>

</div>

<div>
    <small>

    </small>
</div>
</div>


<script>
    // 监听文件选择，显示图片预览
    document.getElementById('fileInput').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.getElementById('preview');
                img.src = e.target.result;  // 将图片的 Base64 数据作为 img 的 src
                img.style.display = 'block'; // 显示图片

                // 清空分析结果
                document.getElementById('results').innerHTML = '';
            }
            reader.readAsDataURL(file);  // 读取图片并转成 Base64
        }
    });

    // 当图片加载失败时，隐藏图片
    document.getElementById('preview').onerror = function() {
        this.style.display = 'none'; // 图片加载失败，隐藏图片
    };

    // 检查是否有 image_url，如果有则显示图片，否则隐藏
    const imgElement = document.getElementById('preview');
    const imageUrl = "{{ image_url }}"; // 后端传递的 image_url
    {#if (image_url) {#}
    {#    imgElement.src = image_url;  // 设置图片的 src#}
    {#    imgElement.style.display = 'block'; // 显示图片#}
    {# else {#}
    {#    imgElement.style.display = 'none'; // 没有图片时隐藏#}
    {##}
    if (imageUrl) {
        imgElement.src = imageUrl;  // 设置图片的 src
        imgElement.style.display = 'block'; // 显示图片
    } else {
        imgElement.style.display = 'none'; // 没有图片时隐藏
    }

</script>

{% endblock%}
